import { Image } from 'antd-mobile';
import React from 'react';

interface IProps {
  width: string | number;
  height: string | number;
  borderRadius?: string;
  src: string;
  state?: 1 | 2 | 3;
  stateStyle?: React.CSSProperties
}

const SeedlingImage = ({ width, height, borderRadius, src, state,stateStyle }: IProps) => {
  // 销售状态(1在售2已定3已售)
  const stateTxt = {
    1: '在售',
    2: '已定',
    3: '已售'
  }
  const stateColor = {
    1: 'rgba(2, 206, 137, 0.8)',
    2: 'rgba(254, 61, 84, 0.8)',
    3: 'rgba(255, 185, 72, 0.8)'
  }
  return <div className="relative">
    <Image
      width={width}
      height={height}
      style={{ 'borderRadius': borderRadius }}
      src={src} />
    {state && <div
      style={{backgroundColor: stateColor[state],...stateStyle}}
      className={`absolute left-0 top-0 rounded-tl-xl rounded-br-xl text-color-white text-xs`}
    >{stateTxt[state]}</div>}
  </div>
};

export default SeedlingImage;
